<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>图片处理（包括图片的裁剪）</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <style>
        .search-div {
            width: 100%;
            height: 65px;
            background-color: white;
            position: fixed;
            border-bottom: 1px solid #cccccc;
        }

        .nav-div {
            width: 100%;
            height: 40px;
            position: absolute;
            top: 25px;
        }

        .back-div {
            display: inline-block;
            height: 100%;
            width: 20%;
            background-color: white;
        }

        .back-div span {
            line-height: 40px;
            margin-left: 10px;
            font-size: 14px;
        }

        .title-div {
            display: inline-block;
            height: 100%;
            width: 60%;
            background-color: white;
            position: absolute;
        }

        .title-div div {
            width: 100%;
            text-align: center;
            line-height: 40px;
            font-size: 18px;
        }

        .right-div {
            display: inline-block;
            height: 100%;
            width: 20%;
            background-color: white;
            position: absolute;
            right: 0px;
        }

        .right-div span {
            float: right;
            margin-right: 10px;
            line-height: 40px;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div class="search-div">
        <div class="nav-div">
            <div class="back-div">
                <span id="cancel">取消</span>
            </div>
            <div class="title-div">
                <div></div>
            </div>
            <div class="right-div">
                <span id="submit">完成</span>
            </div>
        </div>
    </div>

    <script src="../../script/fastclick.js"></script>
    <script src="../../script/jquery_three_two_one.js"></script>
    <script src="../../script/app.js"></script>
    <script>
        apiready = function () {
            var app = new APP();
            app.log("imagehandle", "图片处理页面");

            // 顶部导航栏的高度
            var topH = 66;

            // 获取穿过来的参数
            var param = api.pageParam;

            // 默认裁剪模式(all、image、clip)
            var cutMode = "all";
            // 裁剪样式配置(默认)
            var clip = {
                w: api.winWidth,
                h: api.winWidth,
                x: 0,
                y: (api.winHeight - api.winWidth - topH) / 2,
                borderColor: 'rgba(0,0,0,0)',
                borderWidth: 0,
                appearance: 'rectangle'
            };
            // 如果是地址编辑里的身份证裁剪，或者店铺背景设置
            if (param.type == "idcard") {
                // 设置裁剪模式
                cutMode = "image";
                clip = {
                    w: param.dimension[0],
                    h: param.dimension[1],
                    x: (api.winWidth - param.dimension[0]) / 2,
                    y: (api.winHeight - topH - param.dimension[1]) / 2,
                    borderColor: 'rgba(0,0,0,0)',
                    borderWidth: 0,
                    appearance: 'rectangle'
                };
            }

            if (param.type == "avatar") {
                // 设置裁剪模式
                cutMode = "image";
                clip = {
                    w: param.dimension[0],
                    h: param.dimension[1],
                    x: (api.winWidth - param.dimension[0]) / 2,
                    y: (api.winHeight - topH - param.dimension[1]) / 2,
                    borderColor: 'rgba(0,0,0,0)',
                    borderWidth: 0,
                    appearance: 'rectangle'
                };
            }

            // 初始化
            app.initClipper({
                rect: {
                    x: 0,
                    y: topH,
                    w: app.W,
                    h: app.H - topH
                },
                srcPath: param.srcPath,
                style: {
                    mask: 'rgba(0,0,0,0.3)',
                    clip: clip
                },
                mode: cutMode,
                fixedOn: api.frameName
            }, function (ret, err) {
                app.log("图片裁剪初始化返回", ret);
                // 处理裁剪压缩
                if (ret.status) {
                    $("#submit").click(function () {
                        app.trigger("selectCompelete");
                        app.cutImg({
                            destPath: "fs://cutImage/" + app.getFileName(param.srcPath), // 裁剪保存地址
                            copyToAlbum: false,
                            quality: 1
                        }, function (ret, err) {
                            if (ret && ret.destPath) {
                                var imgFileName = app.getFileName(ret.destPath);
                                app.compImg({
                                    img: ret.destPath,
                                    save: {
                                        imgPath: 'fs://compImage',
                                        imgName: imgFileName
                                    },
                                    quality: 0.5
                                }, function (ret, err) {
                                    if (ret && ret.status) {
                                        // 发送压缩成功消息
                                        app.trigger("compress_image_success", {
                                            flag: param.flag,
                                            imgUrl: "fs://compImage/" + imgFileName,
                                            imgAbsPath: "file://" + app.sd + "/compImage/" + imgFileName
                                        });
                                        app.tout(200, function () {
                                            app.closeW();
                                        });
                                    }
                                });
                            }
                        });
                    });
                }
            });

            // 处理取消裁剪
            $("#cancel").click(function () {
                app.closeW();
            });
        };
    </script>
</body>

</html>